<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">      

    <ui:composition template="/WEB-INF/Template/Template.xhtml">
        <ui:define name="content">
            <h:form id="form">
                <h:panelGrid columns="7"  style="margin-bottom:10px">                      
                    <h:outputText id="displayRange" value="Between #{chartBean.min} and #{chartBean.max}"/>
                    <p:slider  for="txt6,txt7" display="displayRange" style="width:400px" range="true" animate="true"  maxValue="52" 
                               displayTemplate="Between {min} and {max}"/>  
                    <p:selectOneMenu value="#{chartBean.year}">
                        <f:selectItem itemLabel="2014" itemValue="2014" />
                        <f:selectItem itemLabel="2013" itemValue="2013" />
                    </p:selectOneMenu>
                    <h:inputHidden id="txt6" value="#{chartBean.min}" />  
                    <h:inputHidden id="txt7" value="#{chartBean.max}" /> 
                    <p:commandButton update=":form:category" value="Appliquer" ajax="false" styleClass="button" style="text-shadow: none !important;box-shadow: none !important;font-weight:normal !important" />
                </h:panelGrid>  
                <p:lineChart id="category" value="#{chartBean.incidentsWeek}" legendPosition="e" animate="true" xaxisLabel="Week" yaxisLabel="Nombre Incidents" showMarkers="true" 
                             title="Incidents Par Week"  minY="0"  style="height:500px;margin-top:20px" zoom="true" datatipFormat="#{chartBean.datatipFormat}" widgetVar="chart" /> 
            </h:form>
            <h:form id="form1">
                <h:panelGrid columns="7"  style="margin-bottom:10px">                      
                    <p:commandButton styleClass="button" style="text-shadow: none !important;box-shadow: none !important;font-weight:normal !important" onclick="dlg.show()" value="Afficher Tableau" update="form1" />
                    <p:dialog id="dialg" header="Incident Par week" widgetVar="dlg" resizable="false" modal="true"  width="400" height="500" >
                        <p:dataTable id="nbr" value="#{chartBean.lw}" var="item"  resizableColumns="false"  >

                            <p:column style="width: 50px">  
                                <f:facet name="header">
                                    <h:outputText value="Week" />
                                </f:facet>
                                <h:outputText value="#{item.wk}" />
                            </p:column>
                            <p:column style="width:100px">  
                                <f:facet name="header" >
                                    <h:outputText value="Nombre Incident" />
                                </f:facet>
                                <h:outputText value="#{item.val}" />
                            </p:column>
                        </p:dataTable>
                    </p:dialog>
                    <p:commandButton type="button" style="text-shadow: none !important;box-shadow: none !important;font-weight:normal !important" value="Exporter Image" styleClass="button" onclick="exportChart()"/>
                </h:panelGrid>
            </h:form>
            <p:dialog widgetVar="dl" showEffect="fade" modal="true" header="Exporter Image">
                <p:outputPanel id="output" layout="block" />
            </p:dialog>

            <script type="text/javascript">

                function exportChart() {
                    $('#output').empty().append(chart.exportAsImage());
                    dl.show();
                }
            </script>
        </ui:define>
    </ui:composition>
</html>